// 组件分类配置
export const componentCategories = [
  {
    type: 'basic',
    name: '基础组件',
    icon: 'Grid',
    components: [
      { 
        type: 'text', 
        name: '文本', 
        icon: 'Document',
        description: '用于显示文字内容',
        defaultProps: {
          content: '文本内容',
          style: {
            fontSize: '14px',
            color: '#fff',
            textAlign: 'left',
            fontWeight: 'normal'
          }
        }
      },
      {
        type: 'image',
        name: '图片',
        icon: 'Picture',
        description: '用于展示图片',
        defaultProps: {
          src: 'https://via.placeholder.com/300x200/409eff/ffffff?text=图片',
          objectFit: 'cover',
          alt: '图片'
        }
      },
      {
        type: 'iframe',
        name: '内嵌页面',
        icon: 'Monitor',
        description: '用于嵌入其他网页',
        defaultProps: {
          src: 'https://www.example.com',
          allowFullscreen: true,
          scrolling: 'auto'
        }
      }
    ]
  },
  {
    type: 'charts',
    name: '图表组件',
    icon: 'DataLine',
    components: [
      {
        type: 'bar',
        name: '柱状图',
        icon: 'Histogram',
        description: '柱状图系列',
        subTypes: [
          { 
            type: 'bar-basic', 
            name: '基础柱状图',
            description: '最基础的柱状图表现形式',
            defaultData: [120, 200, 150, 80, 70, 110, 130]
          },
          {
            type: 'bar-stack',
            name: '堆叠柱状图',
            description: '展示数据的堆叠关系',
            defaultData: [
              [120, 132, 101, 134, 90, 230, 210],
              [220, 182, 191, 234, 290, 330, 310],
              [150, 232, 201, 154, 190, 330, 410]
            ]
          },
          {
            type: 'bar-horizontal',
            name: '条形图',
            description: '横向展示的柱状图',
            defaultData: [120, 200, 150, 80, 70, 110, 130]
          }
        ]
      },
      {
        type: 'line',
        name: '折线图',
        icon: 'DataLine',
        description: '折线图系列',
        subTypes: [
          {
            type: 'line-basic',
            name: '基础折线图',
            description: '基础的折线图表现形式',
            defaultData: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            type: 'line-area',
            name: '面积图',
            description: '带有面积填充的折线图',
            defaultData: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      },
      {
        type: 'pie',
        name: '饼图',
        icon: 'PieChart',
        description: '饼图系列',
        subTypes: [
          {
            type: 'pie-basic',
            name: '基础饼图',
            description: '基础的饼图表现形式',
            defaultData: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          },
          {
            type: 'pie-doughnut',
            name: '环形图',
            description: '中间带有空心的饼图',
            defaultData: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      },
      {
        type: 'ring',
        name: '环形图',
        icon: 'PieChart',
        description: '环形图系列',
        subTypes: [
          { 
            type: 'ring-basic', 
            name: '基础环形图',
            description: '基础的环形图表现形式',
            defaultData: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      },
      {
        type: 'scatter',
        name: '散点图',
        icon: 'Position',
        description: '散点图系列',
        subTypes: [
          { 
            type: 'scatter-basic', 
            name: '基础散点图',
            description: '用于展示数据的分布',
            defaultData: [
              [10.0, 8.04],
              [8.0, 6.95],
              [13.0, 7.58],
              [9.0, 8.81],
              [11.0, 8.33]
            ]
          }
        ]
      }
    ]
  },
  {
    type: 'info',
    name: '信息组件',
    icon: 'Odometer',
    components: [
      {
        type: 'counter',
        name: '计数器',
        icon: 'Odometer',
        description: '数字计数动画',
        defaultProps: {
          value: 12345,
          prefix: '',
          suffix: '',
          decimals: 0,
          duration: 2,
          useGrouping: true,
          useEasing: true,
          separator: ',',
          decimal: '.'
        }
      },
      {
        type: 'progress',
        name: '进度条',
        icon: 'Loading',
        description: '展示进度信息',
        defaultProps: {
          percentage: 75,
          type: 'line',
          strokeWidth: 6,
          showText: true,
          color: '#409EFF',
          trackColor: '#e5e9f2'
        }
      },
      {
        type: 'statistic',
        name: '统计数值',
        icon: 'DataLine',
        description: '展示统计数据',
        defaultProps: {
          title: '访问量',
          value: 234567,
          precision: 0,
          prefix: '',
          suffix: '',
          color: '#409EFF'
        }
      },
      {
        type: 'clock',
        name: '时钟',
        icon: 'Timer',
        description: '展示时间信息',
        defaultProps: {
          format: 'HH:mm:ss',
          showDate: true,
          dateFormat: 'YYYY-MM-DD',
          color: '#fff',
          fontSize: '24px'
        }
      }
    ]
  },
  {
    type: 'media',
    name: '媒体组件',
    icon: 'VideoPlay',
    components: [
      {
        type: 'video',
        name: '视频',
        icon: 'VideoPlay',
        description: '视频播放器',
        defaultProps: {
          src: '',
          autoplay: false,
          loop: false,
          muted: false,
          controls: true,
          poster: ''
        }
      },
      {
        type: 'carousel',
        name: '轮播图',
        icon: 'Picture',
        description: '图片轮播展示',
        defaultProps: {
          images: [
            { url: 'https://via.placeholder.com/400x300/409eff/ffffff?text=图片1', title: '图片1' },
            { url: 'https://via.placeholder.com/400x300/67c23a/ffffff?text=图片2', title: '图片2' }
          ],
          interval: 3000,
          arrow: 'hover',
          indicator: true,
          autoplay: true,
          type: 'card'
        }
      },
      {
        type: 'weather',
        name: '天气',
        icon: 'Sunny',
        description: '天气信息展示',
        defaultProps: {
          city: '北京',
          type: 'simple',
          color: '#fff',
          fontSize: '16px'
        }
      }
    ]
  },
  {
    type: 'table',
    name: '表格组件',
    icon: 'List',
    components: [
      {
        type: 'table-basic',
        name: '基础表格',
        icon: 'List',
        description: '基础数据表格',
        defaultProps: {
          data: [
            { name: '张三', age: 25, city: '北京' },
            { name: '李四', age: 30, city: '上海' },
            { name: '王五', age: 28, city: '广州' }
          ],
          columns: [
            { prop: 'name', label: '姓名', width: 100 },
            { prop: 'age', label: '年龄', width: 100 },
            { prop: 'city', label: '城市', width: 100 }
          ],
          stripe: true,
          border: false,
          height: 'auto'
        }
      },
      {
        type: 'table-scroll',
        name: '滚动表格',
        icon: 'List',
        description: '支持滚动的数据表格',
        defaultProps: {
          data: [
            { name: '张三', age: 25, city: '北京' },
            { name: '李四', age: 30, city: '上海' },
            { name: '王五', age: 28, city: '广州' }
          ],
          columns: [
            { prop: 'name', label: '姓名', width: 100 },
            { prop: 'age', label: '年龄', width: 100 },
            { prop: 'city', label: '城市', width: 100 }
          ],
          stripe: true,
          border: false,
          height: 300
        }
      }
    ]
  },
  {
    type: 'list',
    name: '列表组件',
    icon: 'List',
    components: [
      {
        type: 'list-basic',
        name: '基础列表',
        icon: 'List',
        description: '基础列表展示',
        defaultProps: {
          data: [
            { title: '列表项1', description: '这是第一个列表项的描述', icon: 'Document' },
            { title: '列表项2', description: '这是第二个列表项的描述', icon: 'Document' },
            { title: '列表项3', description: '这是第三个列表项的描述', icon: 'Document' }
          ],
          itemLayout: 'horizontal',
          bordered: false,
          split: true
        }
      },
      {
        type: 'list-scroll',
        name: '滚动列表',
        icon: 'List',
        description: '支持滚动的列表',
        defaultProps: {
          data: [
            { title: '列表项1', description: '这是第一个列表项的描述', icon: 'Document' },
            { title: '列表项2', description: '这是第二个列表项的描述', icon: 'Document' },
            { title: '列表项3', description: '这是第三个列表项的描述', icon: 'Document' }
          ],
          itemLayout: 'horizontal',
          bordered: false,
          split: true,
          maxHeight: 300
        }
      }
    ]
  },
  {
    type: 'map',
    name: '地图组件',
    icon: 'Location',
    components: [
      {
        type: 'map-china',
        name: '中国地图',
        icon: 'Location',
        description: '中国地图展示',
        defaultProps: {
          data: [],
          roam: true,
          zoom: 1,
          center: [104.114129, 37.550339],
          showLabel: true
        }
      },
      {
        type: 'map-world',
        name: '世界地图',
        icon: 'Location',
        description: '世界地图展示',
        defaultProps: {
          data: [],
          roam: true,
          zoom: 1,
          center: [0, 0],
          showLabel: true
        }
      }
    ]
  },
  {
    type: 'decoration',
    name: '装饰组件',
    icon: 'PictureRounded',
    components: [
      {
        type: 'border',
        name: '边框',
        icon: 'Grid',
        description: '装饰用边框',
        subTypes: [
          {
            type: 'border-1',
            name: '四角边框',
            description: '科技感四角装饰边框',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              title: '标题'
            }
          },
          {
            type: 'border-2',
            name: '发光边框',
            description: '动态发光效果边框',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-3',
            name: '扫描边框',
            description: '扫描线动画边框',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              scanColor: '#03d2d4'
            }
          },
          {
            type: 'border-4',
            name: '渐变边框',
            description: '动态渐变色彩边框',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-5',
            name: '虚线边框',
            description: '动态虚线效果边框',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-6',
            name: '立体边框',
            description: '3D立体效果边框',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-7',
            name: '流光边框',
            description: '流光溢彩效果边框',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-8',
            name: '脉冲边框',
            description: '脉冲呼吸效果边框',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-9',
            name: '多层边框',
            description: '多层叠加效果边框',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-10',
            name: '动态边框',
            description: '动态旋转角标边框',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-11',
            name: '标题边框',
            description: '带标题栏的边框',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              title: '标题'
            }
          },
          {
            type: 'border-12',
            name: '圆角边框',
            description: '圆角发光效果边框',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-13',
            name: '霓虹边框',
            description: '霓虹灯发光效果边框',
            defaultProps: {
              borderColor: '#ff00ff',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-14',
            name: '金属边框',
            description: '金属质感光泽边框',
            defaultProps: {
              borderColor: '#c0c0c0',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-15',
            name: '玻璃边框',
            description: '毛玻璃透明效果边框',
            defaultProps: {
              borderColor: 'rgba(255, 255, 255, 0.3)',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-16',
            name: '火焰边框',
            description: '火焰燃烧效果边框',
            defaultProps: {
              borderColor: '#ff4500',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-17',
            name: '闪电边框',
            description: '闪电闪烁效果边框',
            defaultProps: {
              borderColor: '#ffff00',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-18',
            name: '星空边框',
            description: '星空闪烁效果边框',
            defaultProps: {
              borderColor: '#87ceeb',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-19',
            name: '波浪边框',
            description: '波浪流动效果边框',
            defaultProps: {
              borderColor: '#4169e1',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-20',
            name: '齿轮边框',
            description: '齿轮旋转效果边框',
            defaultProps: {
              borderColor: '#696969',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-21',
            name: '电路边框',
            description: '电路板效果边框',
            defaultProps: {
              borderColor: '#00ff00',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-22',
            name: '钻石边框',
            description: '钻石切割效果边框',
            defaultProps: {
              borderColor: '#b9f2ff',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-23',
            name: '彩虹边框',
            description: '彩虹渐变效果边框',
            defaultProps: {
              borderColor: 'transparent',
              backgroundColor: 'transparent'
            }
          },
          {
            type: 'border-24',
            name: '全息边框',
            description: '全息投影效果边框',
            defaultProps: {
              borderColor: 'transparent',
              backgroundColor: 'transparent'
            }
          }
        ]
      },
      {
        type: 'decoration-title',
        name: '装饰标题',
        icon: 'Edit',
        description: '带装饰效果的标题',
        defaultProps: {
          title: '装饰标题',
          titleColor: '#03d2d4',
          fontSize: '24px',
          decorationColor: '#03d2d4',
          decorationType: 'line'
        }
      },
      {
        type: 'decoration-particles',
        name: '粒子效果',
        icon: 'Loading',
        description: '动态粒子背景效果',
        defaultProps: {
          particleColor: '#03d2d4',
          particleSize: 2,
          particleSpeed: 1,
          particleNumber: 50
        }
      },
      {
        type: 'decoration-scan',
        name: '扫描线',
        icon: 'Loading',
        description: '扫描线动画效果',
        defaultProps: {
          scanColor: '#03d2d4',
          scanWidth: '2px',
          scanDuration: '3s',
          scanDirection: 'horizontal'
        }
      },
      {
        type: 'decoration-light',
        name: '光效',
        icon: 'Loading',
        description: '光效动画效果',
        defaultProps: {
          lightColor: '#03d2d4',
          lightSize: '10px',
          lightType: 'pulse',
          lightDuration: '2s'
        }
      },
      {
        type: 'decoration-hexagon',
        name: '六边形',
        icon: 'Grid',
        description: '六边形装饰效果',
        defaultProps: {
          color: '#03d2d4',
          backgroundColor: 'transparent'
        }
      },
      {
        type: 'decoration-circle',
        name: '圆形',
        icon: 'Loading',
        description: '圆形装饰效果',
        defaultProps: {
          color: '#03d2d4',
          backgroundColor: 'transparent'
        }
      },
      {
        type: 'decoration-triangle',
        name: '三角形',
        icon: 'Loading',
        description: '三角形装饰效果',
        defaultProps: {
          color: '#03d2d4',
          backgroundColor: 'transparent'
        }
      },
      {
        type: 'decoration-dashed',
        name: '虚线动画',
        icon: 'Loading',
        description: '虚线动画效果',
        defaultProps: {
          color: '#03d2d4',
          backgroundColor: 'transparent'
        }
      },
      {
        type: 'decoration-path',
        name: '路径动画',
        icon: 'Loading',
        description: '路径动画效果',
        defaultProps: {
          color: '#03d2d4',
          backgroundColor: 'transparent'
        }
      },
      {
        type: 'decoration-wave',
        name: '波浪线',
        icon: 'Loading',
        description: '波浪线动画效果',
        defaultProps: {
          color: '#03d2d4',
          backgroundColor: 'transparent'
        }
      }
    ]
  }
]

// 获取组件默认配置
export const getComponentConfig = (type) => {
  for (const category of componentCategories) {
    for (const component of category.components) {
      if (component.subTypes) {
        const subType = component.subTypes.find(sub => sub.type === type)
        if (subType) {
          return {
            ...subType,
            defaultProps: subType.defaultProps || component.defaultProps,
            defaultData: subType.defaultData
          }
        }
      } else if (component.type === type) {
        return component
      }
    }
  }
  return null
}

// 判断是否为图表组件
export const isChartComponent = (type) => {
  return [
    'bar', 'bar-basic', 'bar-stack', 'bar-horizontal',
    'line', 'line-area', 'line-stack',
    'pie', 'pie-basic', 'pie-doughnut',
    'ring-basic', 'ring-dynamic',
    'scatter-basic', 'scatter-bubble'
  ].includes(type)
}

// 判断是否为装饰组件
export const isDecorationComponent = (type) => {
  return type.startsWith('border-') || type.startsWith('decoration-')
} 